<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>
<!--	 fileinput-->
	<script src="/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
	<script src="/plugins/bootstrap-fileinput/js/fileinput.min.js" type="text/javascript"></script>
	<link href="/plugins/bootstrap-fileinput/css/fileinput.min.css" type="text/css" rel="stylesheet">
    
    
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >

<form id="goodsList">
            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a  href="#home" data-toggle="tab">商品基本信息</a>
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>
                            </li>    
                            <li >
                                <a onclick="selectTemplateCustomByid()" href="#customAttribute" data-toggle="tab">扩展属性</a>
                            </li>     
                            <li >
                                <a onclick="selectTemplateSpec()" href="#spec" data-toggle="tab" >规格</a>
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
		                           	  				<select name="category1Id" onchange="getCategory2(this.value)" id="category1Select" class="form-control" >

		                           	  				</select>
		                              			</td>
		                              			<td>
		                           	  				<select name="category2Id" onchange="getCategory3(this.value)" id="category2Select" class="form-control select-sm" ></select>
		                              			</td>
		                              			<td>
		                           	  				<select name="category3Id" id="category3Select" class="form-control select-sm" >

													</select>
		                              			</td>
		                              			<td>
		                           	  				模板ID:<span id="templateId">19</span>
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" id="goodsName" name="goodsName"   placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select id="brandSelect" name="brandId" class="form-control" >

									  </select>
		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" name="caption" class="form-control"   placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" name="price" class="form-control"  placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="content"  style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  class="form-control" name="packageList"  placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4" name="saleService"  class="form-control"    placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>
                            
                            <!--图片上传-->
                            <div class="tab-pane" id="pic_upload">
                                <div class="row data-type">                                  
								 <!-- 颜色图片 -->
								 <div class="btn-group">
					                 <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
                             		                 
					             </div>
								 
								 <table class="table table-bordered table-striped table-hover dataTable">
					                    <thead>
					                        <tr>
					                            
											    <th class="sorting">颜色</th>
											    <th class="sorting">图片</th>
												<th class="sorting">操作</th>
							            </thead>
					                    <tbody id="imageBody">

					                    </tbody>
								 </table> 
								  
                                </div>
                            </div>
                           
                           
                            <!--扩展属性-->
                            <div class="tab-pane" id="customAttribute">
                                <div class="row data-type" id="customBody">
	                                <div>
		                                <div id="text1" class="col-md-2 title">扩展属性1</div>
				                        <div class="col-md-10 data">
				                              <input class="form-control" placeholder="扩展属性1">	            	 
				                        </div>
	                                </div>       
									<div>
		                                <div class="col-md-2 title">扩展属性2</div>
				                        <div class="col-md-10 data">
				                              <input class="form-control" placeholder="扩展属性2">	            	 
				                        </div>
	                                </div>  									
                                </div>
                            </div>
                      
                            <!--规格-->
                            <div class="tab-pane" id="spec">
                            	<div class="row data-type">
	                            	<div class="col-md-2 title">是否启用规格</div>
			                        <div class="col-md-10 data">
			                        	<input type="checkbox" >			                           
			                        </div>
                            	</div>
                            	<p>
                            	
                            	<div>
                            	
	                                <div class="row data-type" id="specBody">


	                                </div>
	
	                                
	                                <div class="row data-type">
	                                	 <table class="table table-bordered table-striped table-hover dataTable">
						                    <thead>
						                        <tr>					                          
												    <th class="sorting">屏幕尺寸</th>
													<th class="sorting">网络制式</th>
												    <th class="sorting">价格</th>
												    <th class="sorting">库存</th>
												    <th class="sorting">是否启用</th>
												    <th class="sorting">是否默认</th>
											    </tr>
								            </thead>
						                    <tbody id="itemBody">
						                      <tr>					                           
										            <td>
										            	<span>4.0</span>
										            </td>
													<td>
										            	<span>3G</span>
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
										            <td>
														<span>4.0</span>
										            </td>
													<td>
														<span>4G</span>
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>
														<span>5.0</span>
										            </td>
													<td>
														<span>3G</span>
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  <tr>					                           
													<td>
														<span>5.0</span>
										            </td>
													<td>
														<span>4G</span>
										            </td>
										            <td>
										           		<input class="form-control"  placeholder="价格">
										            </td>
										            <td>
										            	<input class="form-control" placeholder="库存数量">
										            </td>
										            <td>
										             	<input type="checkbox" >
										            </td>
										            <td>
										                <input type="checkbox" >									             	
										            </td>
						                      </tr>
											  
						                    </tbody>
									 	</table>
								
	                                </div>
	                                
	                            </div>
                            </div>

                        </div>
                        <!--tab内容/-->
						<!--表单内容/-->
							 
                    </div>
                 	
                 	
                 	
                 	
                   </div>
                  <div class="btn-toolbar list-toolbar">
				      <button onclick="saveGoods()" class="btn btn-primary" ><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>
</form>
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input id="color" class="form-control" placeholder="颜色" >  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="hidden" id="image" name="image">
									<input type="file" id="file" name="myFile" />
					                <button class="btn btn-primary" type="button" >
				                   		上传
					                </button>	
					            </td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" onclick="saveImage()" data-dismiss="modal" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

<script>

	$('#file').fileinput({
		language: 'zh',
		uploadUrl:'/fileController/upLoad',//文件上传路径
		browseClass: 'btn btn-primary',
		allowedFileExtensions: ["png","jpg","gif","txt"],
		enctype:"multipart/form-data",
	});
	$('#file').on('fileuploaded',function (event,data,previewId,index){
		//给image框值
		if (data.response!=null){
			$("#image").val(data.response.data);
		}
	})
	function saveImage() {
		var url = $("#image").val();
		var color = $("#color").val();
		var html = ''
		html+='<tr>'
		html+='<td><span name="color">'+color+'</span></td>'
		html+='<td>'
		html+='<img name="imgUrl" src="'+url+'" width="100px" height="100px">'
		html+='</td>'
		html+='<td> <button type="button" onclick="delColorHtml(this)" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>'
		html+='</tr>'

		$("#imageBody").append(html);
	}
	function delColorHtml(bu) {
			var tr = bu.parentNode.parentNode;
			tr.parentNode.removeChild(tr);
	}
</script>



            
            <!-- 正文区域 /-->
<script type="text/javascript">

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

</script>
       
</body>

</html>

<script>
	function selectTemplateSpec() {
		$.ajax({
			url:"/goodsController/selectTemplateSpec",
			data:{id:$("#templateId").val()},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result) {
				if (result.code == 10000){
					var template =result.data;//模板的数据
					var specList = template.specVoList;//规格的集合
					var html = ''
					$(specList).each(function (i,e) {
						html+='<div name="specificationName">'
						html+='<div class="col-md-2 title">'+e.text+'</div>'
						html+='<div class="col-md-10 data">'
						$(e.options).each(function (i,g) {
							html+='<span>'
							html+='<input value="'+g.id+'" type="checkbox" >'+g.optionName+''
							html+='</span>'
						})
						html+='</div>'
						html+='</div>'
					})
					$("#specBody").html(html);
				}else {
					alert(result.message)
				}
			},
			error:function (result) {
				alert("系统错误")
			}
		})
	}

	function saveGoods() {

		var customs = document.getElementsByName("customInput");
		var customJson = []
		$(customs).each(function (i,e) {
			custom = {text:e.value}
			customJson.push(custom)
		})
		var customList = JSON.stringify(customJson)
		console.log(customList)

		var typeTemplateId = $("#templateId").val()//获取分类Id
		console.log(typeTemplateId)

		var text = editor.text()//获取文本域的值
		console.log(text)

		var trs = $("#imageBody").find("tr");
		var arr = [];
		$(trs).each(function (i,e) {
			var tds = $(e).find("td")
			var color = $(tds[0]).find("span").html();
			var url = $(tds[1]).find("img").attr('src');
			var image ={color:color,url:url}
			arr.push(image)
		})
		var images = JSON.stringify(arr)
		console.log(images)

		//item 获值
		var arr = []
		var trs = $("#itemBody").find("tr");
		$(trs).each(function (i,e) {
			var specArr = [];
			var tds = $(e).find("td")
			var spec = {屏幕尺寸:$(tds[0]).find('span').html(),网络制式:$(tds[1]).find('span').html()}
			specArr.push(spec)
			var specString = JSON.stringify(specArr)

			var specC = specString.substring(1,specString.length-1);//spec拿到
			var title = $("#goodsName").val()+""+$("#brandSelect").find('option').html()+" "+$(tds[0]).find('span').html()+" "+$(tds[1]).find('span').html()//标题名
			var stockCount = $(tds[3]).find('input').val()//库存
			var num = $(tds[3]).find('input').val()//库存
			var categoryId = typeTemplateId;//三级分类的Id
			var category = $("#category3Select").find("option:selected").text()//三级分类的名字
			var brand = $("#brandSelect").find('option').html()//品牌名
			var price = $(tds[2]).find('input').val()//库存

			var item = {brand:brand,category:category,categoryid:categoryId,num:num,stockCount:stockCount,title:title,spec:specC,price:price}
			arr.push(item);
		})
		var itemS = JSON.stringify(arr);

		console.log(itemS)

		$.ajax({
			url:"/goodsController/saveGoods",
			data:$.param({customAttributeItems:customList,introduction:text,typeTemplateId:typeTemplateId,itemImages:images,itemS:itemS})+'&'+$("#goodsList").serialize(),
			type:"post",
			dataType:"json",
			async:false,
			success:function (result) {
				if (result.code == 10000){

				}else {
					alert(result.message)
				}
			},
			error:function (result) {
				alert("系统错误")
			}
		})
	}

	$(function () {
		selectItemCat()
	})

	function selectItemCat() {
		$.ajax({
			url:"/goodsController/selectGoodsHome",
			data:{parentId:0},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result) {
				if (result.code == 10000){
					var itemCat = result.data
					var Category1Html = '<option value="-1">请选择</option>';
					$(itemCat).each(function (i,e) {
						Category1Html+='<option onclick="selectYes(this.value)" value="'+e.id+'">'+e.name+'</option>'
					})

					$("#category1Select").html(Category1Html)
				}else {
					alert(result.message)
				}
			},
			error:function (result) {
				alert("系统错误")
			}
		})
	}
	function selectYes(id) {
		$.ajax({
			url:"/goodsController/selectYes",
			data:{id:id},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result) {
				if (result.code == 10000){
					var itemCat = result.data
					$("#templateId").html(itemCat.typeId);
					$("#templateId").val(itemCat.typeId);

					selectTemplate(itemCat.typeId)

				}else {
					alert(result.message)
				}
			},
			error:function (result) {
				alert("系统错误")
			}
		})
	}
	function getCategory2(id) {
		$.ajax({
			url:"/goodsController/selectGoodsHome",
			data:{parentId:id},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result) {
				if (result.code == 10000){
					var itemCat = result.data
					var Category1Html = '<option value="-1">请选择</option>';
					$(itemCat).each(function (i,e) {
						Category1Html+='<option onclick="selectYes(this.value)" value="'+e.id+'">'+e.name+'</option>'
					})

					$("#category2Select").html(Category1Html)
				}else {
					alert(result.message)
				}
			},
			error:function (result) {
				alert("系统错误")
			}
		})
	}
	function getCategory3(id) {
		$.ajax({
			url:"/goodsController/selectGoodsHome",
			data:{parentId:id},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result) {
				if (result.code == 10000){
					var itemCat = result.data
					var Category1Html = '<option value="-1">请选择</option>';
					$(itemCat).each(function (i,e) {
						Category1Html+='<option onclick="selectYes(this.value)" value="'+e.id+'">'+e.name+'</option>'
					})

					$("#category3Select").html(Category1Html)

				}else {
					alert(result.message)
				}
			},
			error:function (result) {
				alert("系统错误")
			}
		})
	}
	function selectTemplate(id) {
		$.ajax({
			url:"/goodsController/selectTemplate",
			data:{id:id},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result) {
				if (result.code == 10000){
					var template = result.data
					var brand = template.brandIds
					var brands = JSON.parse(brand);
					var html = '';
					$(brands).each(function (i,e) {
						html+='<option value="'+e.id+'">'+e.text+'</option>'
					})

					$("#brandSelect").html(html)
				}else {
					alert(result.message)
				}
			},
			error:function (result) {
				alert("系统错误")
			}
		})
	}

	function selectTemplateCustomByid() {
		$.ajax({
			url:"/goodsController/selectTemplate",
			data:{id:$("#templateId").val()},
			type:"post",
			dataType:"json",
			async:false,
			success:function (result) {
				if (result.code == 10000){
					var template = result.data
					var customAttributeItem = template.customAttributeItems
					var customAttributeItems = JSON.parse(customAttributeItem);
					var html = '';
					$(customAttributeItems).each(function (i,e) {
						html+='<div>'
						html+='<div id="text1" class="col-md-2 title">'+e.text+'</div>'
						html+='<div class="col-md-10 data">'
						html+='<input name="customInput" class="form-control" placeholder="扩展属性1">'
						html+='</div>'
						html+='</div>'
					})

					$("#customBody").html(html)
				}else {
					alert(result.message)
				}
			},
			error:function (result) {
				alert("系统错误")
			}
		})
	}

</script>